<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fetch() API</title>
    <link crossorigin='anonymous' href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
        rel="stylesheet">
</head>

<body>
    <div class="container">
        <h2 class="page-header">使用 fetch() API</h2>
        <p>
            全局的 fetch() 方法用于发起获取资源的请求。它返回一个 promise，这个 promise 会在请求响应后被 resolve，并传回 Response 对象。
        </p>
        <button class="btn btn-primary" id="btn">点击发送 AJAX</button>
    </div>
    <script>
        //接口地址 https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json
        //获取元素对象
        const btn = document.querySelector('#btn');

        btn.addEventListener('click', function () {

            const fetchPromise = fetch(
                "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
            );

            // console.log(fetchPromise);

            // fetchPromise.then(response => {
            //     console.log(`已收到响应：${response.status}`);
            // })  
            // console.log("已发送请求……");


            // fetchPromise.then(response => {
            //     const jsonPromise = response.json(); //这个 json 方法也是异步的，返回的也是一个Promise对象
            //     console.log(jsonPromise);
            //     jsonPromise.then(json => {
            //         console.log(json);
            //     }) 
            // })

            // Promise 链式调用
            fetchPromise.then((response) => {
                if (!response.ok) {
                    throw new Error(`HTTP error: ${response.status}`);
                }
                return response.json();
            }).then((json) => {
                console.log(json);
            }).catch((reason) => {
                console.warn(reason);
            });
        });


        class Person {


            eat() {
                console.log('吃饭饭~');
                return this;
            }

            drink() {
                console.log('喝水水~');
                return this;
            }


        }

        const person = new Person();
        person.eat().drink();//链式调用






        doSomething(function (result) {
            //做了一些事情
            //做完了
            doSomethingElse(result, function (newResult) {
                //又做了一些事情
                //做完了
                doThirdThing(newResult, function (finalResult) {
                    console.log(`得到最终结果：${finalResult}`);
                }, failureCallback);
            }, failureCallback);
        }, failureCallback);


    </script>
</body>

</html>